<template>
  <div class="index">
    <myheader title="传智博客 黑马程序员Vue.js"></myheader>

    <!-- banner轮播图 -->
    <div class="banner">
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="rgba(255, 255, 255, 0.6)"
        style="height: 205px"
      >
        <van-swipe-item v-for="item in swipeImg" :key="item.id">
          <a :href="item.url">
            <img :src="item.img" alt="" />
          </a>
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 主导航列表 -->
    <div class="tablist" roter>
      <van-grid :border="false" :column-num="3" router>
        <van-grid-item to="/newsList">
          <img src="../../assets/menu3.png" />
          <p>新闻资讯</p>
        </van-grid-item>
        <van-grid-item to="/imgList">
          <img src="../../assets/menu4.png" />
          <p>图片分享</p>
        </van-grid-item>
        <van-grid-item to="/GoodsList">
          <img src="../../assets/menu5.png" />
          <p>商品展示</p>
        </van-grid-item>
        <van-grid-item to="/member">
          <img src="../../assets/menu6.png" />
          <p>留言反馈</p>
        </van-grid-item>
        <van-grid-item to="search">
          <img src="../../assets/menu9.png" />
          <p>搜索资讯</p>
        </van-grid-item>
        <van-grid-item to="call">
          <img src="../../assets/menu10.png" />
          <p>联系我们</p>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import myheader from "../../components/myheader";
import { getLunBo, getProdlist } from "../../Api/index";
export default {
  data() {
    return {
      swipeImg: [],
    };
  },

  components: {
    myheader,
  },
  methods: {},
  async mounted() {
    let res = await getLunBo();
    this.swipeImg = res.data.message;
    // console.log(this.swipeImg);

    let res2 = await getProdlist();
    //  console.log(res2);
  },
};
</script>

.<style lang="less" scoped>
.banner {
  margin: 3px 0;
  img {
    width: 100%;
    height: 205px;
  }
}
.tablist {
  img {
    width: 50px;
    margin-bottom: 15px;
  }
}
.foorer {
  .van-tabbar-item {
    background-color: #f7f7f7;
  }
}
.tablist {
  background-color: #f7f7f7;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>